<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
  <script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
  <script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>

  <style>
    
*{
    margin:0;
    padding:0;
}

i{
    font-style: normal;
}
a{
    text-decoration: none;
}
input{
    outline: none;
    border:none;

    
}

html,body{
    width:100%; 
    font: 14px/150% tahoma,arial,Microsoft YaHei,Hiragino Sans GB,"\u5b8b\u4f53",sans-serif;
    -webkit-font-smoothing: antialiased;
    color: #666;
}

.logo{
	width: 160px;
    height:50px;
    background: url(../img/icon.png) no-repeat;
    position: absolute;
    top:20px;
    left:20px;
}
.desc{
	font-size: 18px;
    line-height: 34px;
    border-left: 1px solid #ccc;
    position: absolute;
    left: 200px;
    top:28px;
    padding-left: 20px;
    font-weight:bold;
}

form{
	width: 400px;
	margin: auto;
	margin-top: 100px;
}
.register-box{
	border: 1px solid #ddd;
    margin-bottom: 32px;
}
.register-box label{
	height: 52px;
    line-height: 52px;
    padding-left: 20px;
    display: inline-block;
}
.register-box input{
	width: 190px;
    height: 19px;
    padding-bottom: 11px;
    padding-left: 20px;
    padding-top: 16px;
    font-size: 14px;
    color: #666;
    font-family: "Microsoft YaHei","Hiragino Sans GB";
}
.register-box .tips{
	position: absolute;
    margin-top: 5px;
    font-size: 14px;
    color: #ccc;
}

.register-box .username_label{
	word-spacing: 10px;
}

.register-box .other_label{
	word-spacing: 2px;
}

.register-box span{
    display: inline-block;
    width: 77px;
    height: 52px;
    border-right: 1px solid #ddd;
}
.register-box .phone{
	padding-left: 18px;
}

#code{
	display: inline-block;
    width: 100px;
    height: 46px;
    vertical-align: middle;
    background-color: black;
    font-size: 25px;
    color: #fff;
    text-align: center;
    line-height: 46px;
}

.arguement{
	margin-bottom: 58px;
}
.arguement input{
	vertical-align: middle;
}
.arguement a{
	color: #38f;
    text-decoration: none;
    font-size: 12px;
}

.submit_btn button{
	width: 100%;
    height: 54px;
    color: #fff;
    background: #e22;
    border: 0;
    font-size: 16px;
    font-family: "Microsoft YaHei","Hiragino Sans GB";
}
  </style>
  <script src="test.js"></script>
</head>
<body>
  <section>
    <form action="">
      <div class="register-box">
        <label for="username" class="username_label">用 户 名
        <input maxlength="20" type="text" placeholder="您的用户名和登录名"/>
        </label>
        <div class="tips">
          
        </div>
      </div>
      <div class="register-box">
        <label for="username" class="other_label">设 置 密 码
        <input maxlength="20" type="password" placeholder="建议至少使用两种字符组合"/>
        </label>
        <div class="tips">
          
        </div>
      </div>
      <div class="register-box">
        <label for="username" class="other_label">确 认 密 码
        <input maxlength="20" type="password" placeholder="请再次输入密码"/>
        </label>
        <div class="tips">
          
        </div>
      </div>
      <div class="register-box">
        <label for="username" class="other_label">
        <span>中国 0086∨</span>
        <input class="phone" maxlength="20" type="text" placeholder="建议使用常用手机"/>
        </label>
        <div class="tips">
          
        </div>
      </div>
      <div class="register-box">
        <label for="username" class="other_label">验 证 码
        <input maxlength="20" type="text" placeholder="请输入验证码"/>
        </label>
        <span id="code"></span>
        <div class="tips">
          
        </div>
      </div>
      <div class="arguement">
        <input type="checkbox" id="xieyi"/>
        阅读并同意
        <a href="#">《京东用户注册协议》</a>
        <a href="#">《隐私政策》</a>
        <div class="tips">
          
        </div>
      </div>
      <div class="submit_btn">
        <button type="submit" id="submit_btn">立 即 注 册</button>
      </div>
    </form>
  </section>
  <script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>